<template>
  <div class="container">
      <outerBox title="实录标签">

      <yes-tags @editTagList='editTagList' :tagsList.sync="tagsList" @delCanback='delCanback' />
      <el-button type="primary" size="medium" round @click="open">添加标签</el-button>
      </outerBox>
    <div  class="standardMode ov">
      <outerBox title="课堂录屏">

        <div v-if="info.fileIds.length" >

          <div class=" imgbox marginT30 flex-box" v-for="(item,i) in  info.fileIds">
            <fileList @deleteList='(lisd)=>deleteList(item,i)'
      :options="{title:'name',}"
      :list='item' />
            <!-- <video  :src="item" class="fileImg" style="width:100%;height: 200px;" controls="controls">
            </video>
            <el-button size="mini" type="danger" round class="el-icon-close" style="padding:7px;" @click="deleteList(item,i)"></el-button> -->
          </div>
        </div>

        <UploadPicFile class="fl"
        :options="{'show-file-list':false,fileTest:fileTest}"
        style="width:280px"
        @uploadSuccess="uploadLiveSuccess">
        <el-button size="medium" style="font-size:50px" type="text" icon="el-icon-plus"  > </el-button>
        </UploadPicFile>
      </outerBox>
      <!-- <outerBox title="精彩片段">
         <div class="marginL10" v-if="list.fragments">
           <el-image :src="file in list.fragments.jion(',')" alt="" />
         </div>
        <UploadPicFile class="fl" :options="{limit:1}"
        style="width:280px"
        @uploadSuccess="uploadNiceSuccess">

        <el-button size="medium" style="font-size:50px" type="text" icon="el-icon-plus"  > </el-button>
        </UploadPicFile>
      </outerBox> -->
    </div>
    <tag-dialog :list="dialogObj" :tagsList="tagsList" :checkedVal.sync='checkedVal'
     :checkKeynote="checkKeynote"  :checkAbilityArr="checkAbilityArr"
     :ByPMapperList.sync="ByPMapperList"
      :importTagsList.sync="importTagsList" :dialogVisible.sync="dialogVisible" @changeImportCheckBox="changeImportCheckBox"
      :growthClassify="getClassfiyArr"
      @Callback="dialogCallback" />
    <div class="footer-group margin30">
<el-button type="success" @click="save">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
  import yesTags from './yesTags'
   import outerBox from '@/components/outerBox'
  import TagDialog from './tagDialog'
  import UploadPicFile from '@/components/UploadPicFile'
  import editClassTimeTabsMixin from './Mixin'
  import fileList from './fileList'
  import {
    getTemplate,saveResCourseVideo
  } from '@/api/createResult'
  import {
    mapMutations
  } from 'vuex'
  export default {
    name: 'CourseVideo',
    components: {
      yesTags,
      outerBox,
      fileList,
      UploadPicFile,
      TagDialog
    },
    mixins:[editClassTimeTabsMixin],
    data() {
      return {
        indexResList:this.list,
        tagsList: [],
        fileTest:/\w+(.flv|.rvmb|.mp4|.avi|.wmv)$/,
        hrefUrl:'',
        sources:'',
        info:{
          fragments:[],//参考资料文件URl
          fileIds:[],
          templateWocUrl:''
        },
        checkKeynote:[],
        checkAbilityArr:[],
        templatePlatform:{},
        hideHref:false,
        resType: 'TEACHING', //教案
        keynote: [],
        abilityArr: [],
        activeMode: '',
        ByPMapperList: [], //能力提升
        importTagsList: [],
        checkedVal: null,
        dialogVisible: false,
        content: '',
        improvementTagList: [],
        keyPointTagList: [],
        findStr:'-*',
        sysList: [], //系统推荐标签
        dialogObj: {
          growthClassify: null,
          stageId: null,
          subjectId: null,
          tagsGroupEnum: null
        }
      }
    },
    created() {
      var tes = this
      console.log("sad", tes)
      this.dialogObj = {
        GROWTH_CLASSIFY: '',
        STAGE: '',
        SUBJECT: '',
        DOWNSTATUS: true
      };
      	this.fetchData()
    },
    mounted(){
     if(this.list.tagList){
       if(this.list.tagList.length) this.getFindImportTags()
       //此处判断为：当编辑状态下有回选标签重点内容的时候 提前获取到所有的重点内容方便后面的修改标签
     }
    },
    props:{
    list:{
      type:[Object,Array],
    	default:[]
      },
    teachingDesignResId:{
      default:'',
    },
    },
    computed: {
      getClassfiyArr(){
        return this.$store.state.uploadLessonPlan.getClassfiyArr
      },
      teachingDesignId() {
        return this.$store.state.uploadLessonPlan.teachingPlanId
      },
    },
	watch:{
		list(val){
      this.indexResList = val
			this.fetchData()
		}
	},
    methods: {
      deleteList({id},i){
        this.info.fileIds.splice(i,1)
        this.save()
       },
      putMsgFn(val) {
      },
      getFiles(filesArr){

      },
      uploadLiveSuccess({res,file,that}){
          this.info.fileIds.push(that.info.filesUrl)
          //this.save()
      },
      open() {
        console.log(this.dialogVisible);
        this.dialogVisible = true;
        this.getFindImportTags()
      },
      uploadNiceSuccess({res,file,that}){
        that.info.fragments.push(that.info.filesUrl)
          // autoParse({docUrl:that.info.filesUrl,templateId :this.templatePlatform.id}).then((res)=>{
          //   this.templatePlatform.templateContentVOList = res.data
          //   that.info.templateWocUrl = that.info.filesUrl
          // })
         // that.info.fileList
      },
      fetchData(){
        let {indexResList:list,info,idGetTagList} = this
        console.log("warseList",list)
        if(list.files){
          info.fileIds = list.files.split(',')
        }else{
           info.fileIds = []
        }
          this.tagsList=idGetTagList(list.tagList)
      },

      pushListFn() {
      },

      save() {
        var that = this
        console.log('this.tagsList', this.tagsList)
        const {improvementTagList,keyPointTagList} = this.getTagListSave(this.tagsList)
        let teachingDesignResId = this.teachingDesignResId
        let {teachingPlanId:teachingDesignId}  = this.$store.state.uploadLessonPlan
        let { fragments } = this
       // this.$set(this.info.template,'templateContentVOList',this.templatePlatform.templateContentVOList)
        var params = {
           fragments,//精彩片段ids
           id:this.list.id,//课堂实录id
          fileIds:this.info.fileIds.join(),//附件 ids
          improvementTagList,
          keyPointTagList,
          teachingDesignId,
          teachingDesignResId
        }
        //console.log("partamd",
        saveResCourseVideo(
          params
        ).then((res) => {
          this.$message.success('保存成功！')
        })
      }
    }

  }
</script>
<style lang="scss">
  .inpBarList {
    textarea {
      height: 300px;
    }
  }
</style>
<style lang="scss" scoped>
  .container {

    // padding: 24px;
    .modeBtn {
      .el-button {
        width: 320px;
        height: 80px;
        font-size: 14px;
        color: #000;
      }
    }
  }
</style>
